<template>
  <view class="trust-transition-card" :class="cardClasses" @click="handleCardClick">
    <!-- 卡牌背景层 -->
    <view class="card-background">
      <view class="background-pattern" :class="trustLevel"></view>
    </view>
    
    <!-- 信任光环效果 -->
    <view class="trust-aura" :class="trustLevel" v-if="showAura">
      <view class="aura-ring"></view>
      <view class="aura-particles">
        <view 
          class="particle" 
          v-for="i in particleCount" 
          :key="i"
          :style="getParticleStyle(i)"
        ></view>
      </view>
    </view>
    
    <!-- 卡牌内容 -->
    <view class="card-content">
      <!-- 卡牌头部 -->
      <view class="card-header">
        <text class="card-icon">{{ cardData.icon }}</text>
        <text class="card-name">{{ cardData.name }}</text>
        <view class="trust-badge" :class="trustLevel">
          <text class="badge-text">{{ getTrustLevelText() }}</text>
        </view>
      </view>
      
      <!-- 信任进度条 -->
      <view class="trust-progress">
        <view class="progress-label">
          <text class="label-text">信任值</text>
          <text class="value-text">{{ trustValue }}/100</text>
        </view>
        <view class="progress-bar">
          <view 
            class="progress-fill" 
            :style="{ width: trustValue + '%' }"
            :class="trustLevel"
          ></view>
        </view>
      </view>
      
      <!-- 信任效果 -->
      <view class="trust-effects" v-if="trustEffects.length > 0">
        <view 
          class="effect-item" 
          v-for="effect in trustEffects" 
          :key="effect.id"
          :class="{ active: effect.active }"
        >
          <text class="effect-icon">{{ effect.icon }}</text>
          <text class="effect-text">{{ effect.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 过渡动画层 -->
    <view class="transition-layer" v-if="isTransitioning">
      <view class="transition-effect" :class="transitionType">
        <text class="transition-text">{{ transitionText }}</text>
      </view>
    </view>
    
    <!-- 点击波纹效果 -->
    <view class="ripple-effect" v-if="showRipple" :style="rippleStyle"></view>
  </view>
</template>

<script>
export default {
  name: 'TrustTransitionCard',
  props: {
    cardData: {
      type: Object,
      required: true
    },
    trustValue: {
      type: Number,
      default: 50
    },
    showAura: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      isTransitioning: false,
      transitionType: '',
      transitionText: '',
      showRipple: false,
      rippleStyle: {},
      previousTrustValue: 50
    }
  },
  
  computed: {
    trustLevel() {
      if (this.trustValue >= 80) return 'high'
      if (this.trustValue >= 50) return 'medium'
      if (this.trustValue >= 20) return 'low'
      return 'broken'
    },
    
    cardClasses() {
      return [
        'trust-transition-card',
        `trust-${this.trustLevel}`,
        `card-${this.cardData.type}`,
        {
          'transitioning': this.isTransitioning,
          'ripple-active': this.showRipple
        }
      ]
    },
    
    trustEffects() {
      const effects = []
      
      if (this.trustValue >= 90) {
        effects.push({
          id: 'divine_blessing',
          name: '神圣祝福',
          icon: '✨',
          active: true
        })
      }
      
      if (this.trustValue >= 80) {
        effects.push({
          id: 'perfect_trust',
          name: '完美信任',
          icon: '💎',
          active: true
        })
      }
      
      if (this.trustValue >= 60) {
        effects.push({
          id: 'cooperation_boost',
          name: '协作加成',
          icon: '🤝',
          active: true
        })
      }
      
      if (this.trustValue <= 20) {
        effects.push({
          id: 'suspicion',
          name: '怀疑状态',
          icon: '⚠️',
          active: true
        })
      }
      
      if (this.trustValue <= 10) {
        effects.push({
          id: 'broken_trust',
          name: '信任破裂',
          icon: '💔',
          active: true
        })
      }
      
      return effects
    },
    
    particleCount() {
      return Math.floor(this.trustValue / 20) + 3
    }
  },
  
  watch: {
    trustValue(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.previousTrustValue = oldValue
        this.triggerTransition(newValue, oldValue)
      }
    }
  },
  
  methods: {
    getTrustLevelText() {
      const levels = {
        high: '高度信任',
        medium: '一般信任',
        low: '低度信任',
        broken: '信任破裂'
      }
      return levels[this.trustLevel] || '未知'
    },
    
    getParticleStyle(index) {
      const angle = (360 / this.particleCount) * index
      const radius = 30 + (this.trustValue / 100) * 20
      const x = Math.cos(angle * Math.PI / 180) * radius
      const y = Math.sin(angle * Math.PI / 180) * radius
      
      return {
        transform: `translate(${x}rpx, ${y}rpx)`,
        animationDelay: `${index * 0.1}s`
      }
    },
    
    triggerTransition(newValue, oldValue) {
      const change = newValue - oldValue
      
      if (change > 0) {
        this.transitionType = 'positive'
        this.transitionText = `+${change}`
      } else if (change < 0) {
        this.transitionType = 'negative'
        this.transitionText = `${change}`
      }
      
      this.isTransitioning = true
      
      setTimeout(() => {
        this.isTransitioning = false
      }, 1000)
    },
    
    handleCardClick(event) {
      // 创建波纹效果
      this.createRippleEffect(event)
      
      // 触发点击事件
      this.$emit('card-click', {
        cardId: this.cardData.id,
        trustValue: this.trustValue,
        trustLevel: this.trustLevel
      })
    },
    
    createRippleEffect(event) {
      const rect = event.currentTarget.getBoundingClientRect()
      const size = Math.max(rect.width, rect.height)
      const x = event.detail.x - rect.left - size / 2
      const y = event.detail.y - rect.top - size / 2
      
      this.rippleStyle = {
        width: size + 'rpx',
        height: size + 'rpx',
        left: x + 'rpx',
        top: y + 'rpx'
      }
      
      this.showRipple = true
      
      setTimeout(() => {
        this.showRipple = false
      }, 600)
    }
  }
}
</script>

<style scoped>
.trust-transition-card {
  position: relative;
  background: white;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 信任状态样式 */
.trust-transition-card.trust-high {
  border: 3rpx solid #4caf50;
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
}

.trust-transition-card.trust-medium {
  border: 3rpx solid #ff9800;
  background: linear-gradient(135deg, #fff8f0 0%, #ffe6cc 100%);
}

.trust-transition-card.trust-low {
  border: 3rpx solid #ff5722;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
}

.trust-transition-card.trust-broken {
  border: 3rpx solid #f44336;
  background: linear-gradient(135deg, #fafafa 0%, #e0e0e0 100%);
  filter: grayscale(0.3);
}

/* 卡牌背景层 */
.card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.background-pattern {
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-size: 40rpx 40rpx;
  background-repeat: repeat;
}

.background-pattern.high {
  background-image: radial-gradient(circle, #4caf50 2rpx, transparent 2rpx);
}

.background-pattern.medium {
  background-image: radial-gradient(circle, #ff9800 2rpx, transparent 2rpx);
}

.background-pattern.low {
  background-image: radial-gradient(circle, #ff5722 2rpx, transparent 2rpx);
}

.background-pattern.broken {
  background-image: radial-gradient(circle, #f44336 2rpx, transparent 2rpx);
}

/* 信任光环 */
.trust-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120rpx;
  height: 120rpx;
  pointer-events: none;
  z-index: 2;
}

.aura-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: auraPulse 2s infinite;
}

.trust-high .aura-ring {
  border: 2rpx solid rgba(76, 175, 80, 0.6);
  box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.4);
}

.trust-medium .aura-ring {
  border: 2rpx solid rgba(255, 152, 0, 0.6);
  box-shadow: 0 0 20rpx rgba(255, 152, 0, 0.4);
}

.trust-low .aura-ring {
  border: 2rpx solid rgba(255, 87, 34, 0.6);
  box-shadow: 0 0 20rpx rgba(255, 87, 34, 0.4);
}

.trust-broken .aura-ring {
  border: 2rpx solid rgba(244, 67, 54, 0.6);
  box-shadow: 0 0 20rpx rgba(244, 67, 54, 0.4);
}

/* 光环粒子 */
.aura-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rpx;
  height: 4rpx;
  border-radius: 50%;
  animation: particleFloat 3s infinite;
}

.trust-high .particle {
  background: #4caf50;
  box-shadow: 0 0 6rpx #4caf50;
}

.trust-medium .particle {
  background: #ff9800;
  box-shadow: 0 0 6rpx #ff9800;
}

.trust-low .particle {
  background: #ff5722;
  box-shadow: 0 0 6rpx #ff5722;
}

.trust-broken .particle {
  background: #f44336;
  box-shadow: 0 0 6rpx #f44336;
}

/* 卡牌内容 */
.card-content {
  position: relative;
  z-index: 3;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.card-name {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.trust-badge {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.trust-badge.high {
  background: #4caf50;
  color: white;
}

.trust-badge.medium {
  background: #ff9800;
  color: white;
}

.trust-badge.low {
  background: #ff5722;
  color: white;
}

.trust-badge.broken {
  background: #f44336;
  color: white;
}

.badge-text {
  font-size: 18rpx;
}

/* 信任进度条 */
.trust-progress {
  margin-bottom: 20rpx;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.label-text {
  font-size: 24rpx;
  color: #666;
  font-weight: bold;
}

.value-text {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background: #e0e0e0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.progress-fill.high {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.3);
}

.progress-fill.medium {
  background: linear-gradient(90deg, #ff9800, #ffc107);
  box-shadow: 0 0 8rpx rgba(255, 152, 0, 0.3);
}

.progress-fill.low {
  background: linear-gradient(90deg, #ff5722, #ff7043);
  box-shadow: 0 0 8rpx rgba(255, 87, 34, 0.3);
}

.progress-fill.broken {
  background: linear-gradient(90deg, #f44336, #e57373);
  box-shadow: 0 0 8rpx rgba(244, 67, 54, 0.3);
}

/* 信任效果 */
.trust-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.effect-item {
  display: flex;
  align-items: center;
  padding: 6rpx 12rpx;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;
  font-size: 20rpx;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.effect-item.active {
  background: rgba(76, 175, 80, 0.1);
  opacity: 1;
  color: #4caf50;
  font-weight: bold;
}

.effect-icon {
  margin-right: 4rpx;
  font-size: 18rpx;
}

.effect-text {
  font-size: 18rpx;
}

/* 过渡动画层 */
.transition-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

.transition-effect {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
  animation: transitionBounce 1s ease-out;
}

.transition-effect.positive {
  background: rgba(76, 175, 80, 0.9);
  color: white;
  box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.5);
}

.transition-effect.negative {
  background: rgba(244, 67, 54, 0.9);
  color: white;
  box-shadow: 0 0 20rpx rgba(244, 67, 54, 0.5);
}

.transition-text {
  font-size: 22rpx;
}

/* 波纹效果 */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.3);
  pointer-events: none;
  z-index: 5;
  animation: rippleExpand 0.6s ease-out;
}

/* 悬停效果 */
.trust-transition-card:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
}

.trust-transition-card.trust-high:hover {
  box-shadow: 0 12rpx 40rpx rgba(76, 175, 80, 0.3);
}

.trust-transition-card.trust-medium:hover {
  box-shadow: 0 12rpx 40rpx rgba(255, 152, 0, 0.3);
}

.trust-transition-card.trust-low:hover {
  box-shadow: 0 12rpx 40rpx rgba(255, 87, 34, 0.3);
}

.trust-transition-card.trust-broken:hover {
  box-shadow: 0 12rpx 40rpx rgba(244, 67, 54, 0.3);
}

/* 动画效果 */
@keyframes auraPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes transitionBounce {
  0% {
    transform: scale(0) translateY(20rpx);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) translateY(-10rpx);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 0;
  }
}

@keyframes rippleExpand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-transition-card {
    margin: 12rpx;
    padding: 20rpx;
  }
  
  .card-name {
    font-size: 26rpx;
  }
  
  .progress-label {
    font-size: 22rpx;
  }
  
  .value-text {
    font-size: 22rpx;
  }
}
</style>

